// vue3中的自定义指令
// Vue插件: 一个特殊的对象：
// https://v3.cn.vuejs.org/guide/plugins.html#%E7%BC%96%E5%86%99%E6%8F%92%E4%BB%B6
// 1. 有一个install方法，它的参数在代码运行的过程中，会自动传入vue实例
// 2. app.use(插件)，它会自动执行 插件的install方法，并自动传入vue实例
import { useIntersectionObserver } from '@vueuse/core'
// 导入默认图片
import defaultImg from '@/assets/images/200.png'

// 自定义指令格式
// 固定写法
// install(app){ app.directive('自定义指令'), { mounted(el,binding){ '逻辑代码' } } }
export default {
  install(app) {
    app.directive('imgLazy', {
      // el：指令所绑定的元素，可以用来直接操作 DOM。
      // binding：一个对象，包含以下 property参数：
      //      name：指令名，不包括 v- 前缀。
      //      value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
      //      oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
      //      expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
      //      arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
      //      modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

      // 一般执行时机都在mounted() 函数中执行
      // mounted在绑定元素的父组件挂载之后调用
      mounted(el, binding) {
        // 在此阶段,给图片赋值一个路径,防止网速慢而出现图片空白显示
        el.src = defaultImg
        // 监听当前图片是否可见，是可见则给src赋值图片路径
        useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // 判断是否可见
            if (isIntersecting) {
              // 可见则给图片赋值
              el.src = binding.value
            }
          },
          { threshold: 0.1 }
        )
      }
    })
  }
}
